<template>
  <el-container style="height:100%">
    <el-container style="height:calc(100% - 100px)">
      <el-aside
        width="160px"
        style="background-color: rgb(238, 241, 246);overflow-x: hidden;"
      >
        <el-menu
          :default-openeds="['1', '3']"
          style="width: 160px;text-align:center;"
        >
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-ice-drink" />键盘使用
            </template>
            <el-menu-item-group>
              <template slot="title">
                键盘用例
              </template>
              <el-menu-item
                index="1-1"
                c="pc"
                @click="open"
              >
                pc
              </el-menu-item>
              <el-menu-item
                index="1-2"
                c="pad"
                @click="open"
              >
                pad
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main>
        <component :is="curComponent" />
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
let pc = () => import(/* webpackChunkName: "pc"  */ './pc.vue');
let pad = () => import(/* webpackChunkName: "pad"  */ './pad.vue');

export default {
    name: 'Layout',
    components: {
        pc,
        pad,
    },
    data: function () {
        return {
            curComponent: 'pc',
        };
    },
    mounted () {},
    methods: {
        open (event) {
            // console.log('event.target', event.$el.attributes, event.$el.attributes['c'].value);
            this.curComponent = event.$el.attributes['c'].value;
        },
        reloadStore (event) {
            this.curComponent = event.$el.attributes['c'].value;
        },
    },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.el-header {
  background-color: #333;
  color: #333;
  line-height: 60px;
}

.el-container {
  height: calc(100% - 60px);
}

.el-aside {
  color: #333;
}
</style>
